<template>
  <div class="absolute inset-0 p-2">
    <div class="h-full flex flex-col">
      <div class="flex flex-wrap gap-2 mt-2 mb-2">
        <div v-for="col in columnDefs" :key="col.field" class="w-32">
          <el-input
            v-model="searchTerms[col.field]"
            size="small"
            :placeholder="`搜索` + col.headerName"
            @input="onColumnSearch(col.field)"
          />
        </div>
      </div>
      <div class="flex-1">
        <ag-grid-vue
          class="ag-theme-alpine"
          style="width: 100%; height: 100%"
          :row-data="rowData"
          :column-defs="columnDefs"
          @gridReady="onGridReady"
        ></ag-grid-vue>
      </div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
import Mock from 'mockjs'
import { mapState } from 'vuex'
import { hongkongDataMap, macauDataMap } from '@/data/index.js'
import { AgGridVue } from 'ag-grid-vue'

import 'ag-grid-community/dist/styles/ag-grid.css' // 基础样式
import 'ag-grid-community/dist/styles/ag-theme-alpine.css' // 主题样式

export default {
  name: 'ForecastPage',

  components: {
    AgGridVue
  },
  mixins: [],
  props: {},
  data() {
    return {
      originalData: [],
      loading: true,
      searchTerms: {}, // 保存每列的搜索关键字
      columnDefs: [
        { headerName: '序号', valueGetter: 'node.rowIndex + 1', width: 80 },
        { headerName: '商品名称', field: 'productName' },
        { headerName: '品牌', field: 'brand' },
        { headerName: '价格 (元)', field: 'price' },
        { headerName: '库存', field: 'stock' },
        { headerName: '销售量', field: 'sales' },
        { headerName: '供应商', field: 'supplier' }
      ],
      rowData: []
    }
  },
  computed: {
    ...mapState('study', ['region'])
  },
  created() {
    this.generateMockData() // 组件创建时生成数据
    this.initializeSearchTerms() // 初始化搜索关键字
  },
  methods: {
    generateMockData() {
      // 使用 Mock.js 生成 10000 条数据
      const mockData = Mock.mock({
        'data|5000': [
          {
            productName: '@ctitle(3, 8)', // 随机生成 3-8 个中文字符的商品名称
            brand: '@ctitle(2, 5)', // 随机生成 2-5 个中文字符的品牌
            price: '@integer(100, 10000)', // 随机生成 100-10000 的价格
            stock: '@integer(0, 500)', // 随机生成 0-500 的库存
            sales: '@integer(0, 300)', // 随机生成 0-300 的销量
            supplier: '@ctitle(5, 10)' // 随机生成 5-10 个中文字符的供应商
          }
        ]
      })

      this.rowData = mockData.data // 将生成的数据赋值给 rowData
      this.originalData = _.cloneDeep(mockData.data) // 保存一份原始数据
    },
    onGridReady(params) {
      this.gridApi = params.api
      this.gridColumnApi = params.columnApi

      // 调整列宽以适应容器
      this.gridApi.sizeColumnsToFit()

      console.log('gridApi', this.gridApi)

      // 窗口大小变化时调整表格宽度
      window.addEventListener('resize', () => {
        this.gridApi.sizeColumnsToFit()
      })
    },
    initializeSearchTerms() {
      this.columnDefs.forEach((col) => {
        if (col.field) {
          this.$set(this.searchTerms, col.field, '') // 初始化每列搜索关键字为空
        }
      })
    },
    onColumnSearch(field) {
      const filteredData = this.originalData.filter((item) => {
        return Object.keys(this.searchTerms).every((key) => {
          const searchValue = this.searchTerms[key].trim().toLowerCase()
          return !searchValue || (item[key] && item[key].toString().toLowerCase().includes(searchValue))
        })
      })
      this.rowData = filteredData
    }
  }
}
</script>

<style lang="scss" scoped>
// .forecast-className {
//   styles
// }
</style>
